<template>
    <div>
        <Row type="flex" align="middle" class="ivu-mb-8" :gutter="12">
            <Col><DatePicker v-model="date" type="daterange" @on-change="changeAskData" :options="options" placeholder="请选择对话日期" v-width="200"></DatePicker></Col>
            <Col><Button type="primary" @click="uploadDialog">上传对话列表</Button></Col>
            <Col><Button type="primary" @click="templateDownload">模板下载</Button></Col>
        </Row>
        <Table :columns="columns" :data="data" :loading="loading">
            <template slot-scope="{ row }" slot="action">
                <a @click="handleDelete(row)" style="color:#ed4014">删除</a>
            </template>
            <template slot="footer">
                <Page
                    show-total show-elevator
                    show-sizer transfer
                    :total="total"
                    :current.sync="params.page"
                    :page-size="params.pageSize"
                    :page-size-opts="pageOpts"
                    @on-change="changepage"
                    @on-page-size-change="changepageSize"
                    style="text-align: center;"
                />
            </template>
        </Table>
        <Modal
            v-model="uploadDialogModal" title="上传对话列表" @on-cancel="uploadDialogCancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="对话软件" prop="source_soft">
                    <Select  style="width:200px"  placeholder="请选择对话软件" v-model="formValidate.source_soft">
                        <Option v-for="item in tallList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <!-- <FormItem label="日期" prop="date_time">
                    <div v-if="repeat" style="color:#ed4014">当前选择的日期数据已存在！</div>
                    <DatePicker type="date" placeholder="请选择时间" v-model="formValidate.date_time" @on-change="getrepeat"></DatePicker>
                </FormItem> -->
                <FormItem label="文件" prop="file">
                    <Row type="flex" align="middle" :gutter="12">
                        <Col>
                            <Upload
                                action="/"
                                :before-upload="handleUpload"
                                accept=".xls,.xlsx,.csv"
                                :format="['xlsx', 'xls', 'csv']">
                                <Button type="primary">选择文件</Button>
                            </Upload>
                        </Col>
                        <Col v-if="formValidate.file === null"><div style="color:#ed4014">未选择任何文件</div></Col>
                        <Col v-else ><div>{{formValidate.file.name}}</div></Col>
                    </Row>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="uploadDialogCancel('formValidate')">取消</Button>
                <Button type="primary" :loading="loadings" @click="uploadDialogOk('formValidate')" >确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { marketingdatadatalist, marketingdatadeletedata, marketingdatacheckdata, marketingdataimportexcel, marketingdatadialogueselect } from '@/api/hqapi/networkMarketing.js';
    import Setting from '@/setting';
    export default {
        name: 'dialogfile',

        data () {
            const validateFile = (rule, value, callback) => {
                if (this.formValidate.file !== null) callback();
                else callback(new Error('未选择任何文件'));
            };
            return {
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                exporturl: 'excel/marketing/marketing_data.xlsx',
                pageOpts: [10, 20, 50, 100],
                loading: false,
                loadings: false,
                total: 0,
                data: [],
                columns: [
                    { title: '对话日期', key: 'date', width: 120 },
                    { title: '数据条数', key: 'total', width: 120 },
                    { title: '上传时间', key: 'date_time', width: 150 },
                    { title: '对话软件', key: 'source_soft_str', width: 200 },
                    { title: '上传人', key: 'operation_name', minWidth: 120 },
                    { title: '操作', slot: 'action', width: 80 }
                ],
                date: [],
                params: { start_time: '', end_time: '', page: 1, pageSize: 20 },
                repeat: false,
                uploadDialogModal: false,
                formValidate: {
                    source_soft: '',
                    file: null
                },
                ruleValidate: {
                    source_soft: [{ required: true, type: 'number', message: '请选择对话软件', trigger: 'change' }],
                    file: [{ validator: validateFile, required: true, trigger: 'change' }]
                },
                tallList: []
            };
        },

        mounted () {
            this.date = [this.$Date().subtract(1, 'day').format('YYYY-MM-DD'), this.$Date().subtract(1, 'day').format('YYYY-MM-DD')]
            this.params.start_time = this.date[0]
            this.params.end_time = this.date[1]
            this.initial()
        },

        methods: {
            initial () {
                marketingdatadialogueselect().then(res => {
                    this.tallList = res
                })
                this.askData()
            },
            askData () {
                this.loading = true
                marketingdatadatalist(this.params).then(res => {
                    this.data = res.list
                    this.total = res.total
                    this.loading = false
                })
            },
            changeAskData () {
                this.params.start_time = this.date[0]
                this.params.end_time = this.date[1]
                this.params.page = 1;
                this.askData()
            },
            changepage (e) {
                this.params.page = e;
                this.askData()
            },
            changepageSize (e) {
                this.params.page = 1;
                this.params.pageSize = e;
                this.askData()
            },
            handleDelete (row) {
                this.$Modal.confirm({
                    title: '删除提示',
                    content: `<p>是否删除此对话日期下的数据？</p>`,
                    onOk: () => {
                        marketingdatadeletedata({ id: row.id }).then(() => {
                            this.$Message.success('删除成功');
                            this.askData();
                        });
                    }
                });
            },
            getrepeat () {
                marketingdatacheckdata({ date_time: this.formValidate.date_time }).then(res => {
                    this.repeat = res
                })
            },
            handleUpload (file) {
                this.formValidate.file = file;
                this.$refs.formValidate.validate()
                return false;
            },
            uploadDialog () {
                this.uploadDialogModal = true
                this.formValidate.file = null
                this.formValidate.date_time = ''
                this.repeat = false
            },
            uploadDialogCancel (name) {
                this.$refs[name].resetFields();
                this.uploadDialogModal = false
            },
            uploadDialogOk (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let FormDatas = new FormData()
                        FormDatas.append('source_soft', this.formValidate.source_soft)
                        FormDatas.append('file', this.formValidate.file)
                        this.loadings = true
                        marketingdataimportexcel(FormDatas).then(res => {
                            this.$Message.success('对话文件列表上传成功');
                            this.askData()
                            this.uploadDialogModal = false
                            this.loadings = false
                        }).catch(error => {
                            console.log(error)
                            this.loadings = false
                        })
                    }
                })
            },
            templateDownload () {
                let urltitle = Setting.apiBaseURL;
                let url = `${urltitle}/${this.exporturl}`;
                window.open(url);
            }
        }
    };
</script>

<style lang="scss" scoped>

</style>
